<!-- 危化品管理-基本资料-试剂配置 -->
<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="名称">
              <el-input v-model="listQuery.fcatname" placeholder="CAS号/名称" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="试剂分类">
              <el-select v-model="listQuery.fcustomno" placeholder="请选择"
                :disabled="$store.getters.userInfo.manufacturer">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <template v-if="showAll">
          <el-col :span="6">
            <el-form-item label="试剂属性">
              <el-select v-model="listQuery.fcusttype" placeholder="请选择"
                :disabled="$store.getters.userInfo.manufacturer">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </template>

          <el-col :span="8">
            <el-form-item label="">
              <el-button type="primary" icon="el-icon-search" @click="getlist">查询</el-button>
              <el-button type="success" icon="el-icon-plus" @click="insert(undefined)">新增</el-button>
              <el-button type="warning" icon="el-icon-upload2">导入</el-button>
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll = true" v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll = false" v-else>收起</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <JNPF-table :data="list" border v-loading="loading">
          <el-table-column prop="FCATNAME" label="品名"></el-table-column>
          <el-table-column prop="FPARENTNO" label="中文别名"></el-table-column>
          <el-table-column prop="FTYPE" label="形态"  width="95"></el-table-column>
          <el-table-column prop="FSIZE" label="密度" width="95"></el-table-column>
          <el-table-column prop="FCAS" label="CAS号"></el-table-column>
          <el-table-column prop="FCLASS" label="试剂分类"></el-table-column>
          <el-table-column fixed="left" label="操作" width="150">
            <template slot-scope="scope">
              <el-button @click.native.prevent="insert(scope.row.FCATNO)" icon="el-icon-edit" type="text" size="small">
                编辑
              </el-button>
              <el-popconfirm title="确定删除当前数据吗？" @confirm="Catdelete(scope.row.FCATNO)">
                <el-button slot="reference" icon="el-icon-delete" style="color: red;margin-left: 10px;"
                  type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
        <Form ref="Form" :parelist="list" />
      </div>
    </div>
  </div>
</template>

<script>
  import Form from "./Form.vue"
  export default {
    name: 'shop',
    components: { Form },
    data() {
      return {
        showAll:false,
        fvisiblelist: [
          { id: "1", fullName: "是" },
          { id: "2", fullName: "否" },
        ],
        total: 0,
        list: [
        {
          "FCATNAME":"硝化甘油炸药",
          "FPARENTNO":"",
          "FTYPE":"固体(克)",
          "FSIZE":"/",
          "FCAS":"",
          "FCLASS":"民用爆炸物"
        },{
          "FCATNAME":"二乙基镁",
          "FPARENTNO":"",
          "FTYPE":"液体(毫升)",
          "FSIZE":"0 克/毫升",
          "FCAS":"557-18-6",
          "FCLASS":""
        },{
          "FCATNAME":"硫氰酸",
          "FPARENTNO":"",
          "FTYPE":"液体(毫升)",
          "FSIZE":"0 克/毫升",
          "FCAS":"463-56-9",
          "FCLASS":""
        },{
          "FCATNAME":"甲酸乙烯酯",
          "FPARENTNO":"",
          "FTYPE":"液体(毫升)",
          "FSIZE":"0 克/毫升",
          "FCAS":"692-45-5",
          "FCLASS":""
        },{
          "FCATNAME":"2,3,4,6-四氯苯酚",
          "FPARENTNO":"",
          "FTYPE":"固体(克)",
          "FSIZE":"/",
          "FCAS":"58-90-2",
          "FCLASS":"危险化学品"
        },{
          "FCATNAME":"佐匹克隆",
          "FPARENTNO":"",
          "FTYPE":"固体(克)",
          "FSIZE":"/",
          "FCAS":"43200-80-2",
          "FCLASS":"精神药品 "
        },{
          "FCATNAME":"曲马多",
          "FPARENTNO":"",
          "FTYPE":"固体(克)",
          "FSIZE":"/",
          "FCAS":"27203-92-5",
          "FCLASS":"精神药品 "
        }
        ],

        //所属校区选择数据
        options1: [{
          value: '1',
          label: '易制毒'
        }, {
          value: '2',
          label: '易制爆'
        }, {
          value: '3',
          label: '一般化学品'
        }, {
          value: '4',
          label: '剧毒品'
        }, {
          value: '5',
          label: '危险化学品'
        }],

        //所属校区选择数据
        options2: [{
          value: '1',
          label: '急性毒性,类别1、类别2、类别3 - 有机'
        }, {
          value: '2',
          label: '急性毒性,类别1、类别2、类别3 - 无机'
        }, {
          value: '3',
          label: '金属腐蚀物,皮肤腐蚀/刺激,类别1 - 碱性有机'
        }],

        loading: false,
        listQuery: {
          page: 1,
          limit: 20,
          sort: "desc",
          sidx: "",
          fcatno: "",
          fcatname: ""
        },
      };
    },
    computed: {},
    created() {
    },
    methods: {
      insert(row) {
        this.$refs.Form.init(row);
      },
    },
  };
</script>